<template>
  <div class="table-box">
    <ProTable
      :tool-button="[]"
      ref="proTable"
      :request-auto="false"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
    >
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue";
import { Device } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getRuleRecord, getAllRules } from "@/api/modules/device";
import { transformDate } from "@/utils/index";
import { useRoute } from "vue-router";
const route = useRoute();
const proTable = ref<ProTableInstance>();
const optionList = ref([]);
onMounted(() => {
  if (route.query.ruleName) {
    proTable.value.searchParam.ruleName = route.query.ruleName;
  }
  getAllRules().then((res: any) => {
    optionList.value = res.data.map(item => {
      return {
        label: item.ruleName,
        value: item.bizId
      };
    });
  });
  proTable.value.search();
});
const dataCallback = (data: any) => {
  return {
    list: data.records,
    total: data.page.totalRows,
    currentPage: data.page.currentPage,
    pageSize: data.page.pageSize
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.checkRuleId = newParams.ruleName;
  return getRuleRecord(newParams);
};

const columns = reactive<ColumnProps<Device>[]>([
  {
    prop: "deviceSn",
    label: "设备号",
    search: { el: "input" },
    minWidth: 130
  },
  {
    prop: "ruleName",
    label: "事件类型",
    minWidth: 130,
    search: { el: "select" },
    enum: optionList,
    render: scope => {
      return scope.row.ruleName;
    }
  },
  {
    prop: "createTime",
    label: "事件时间",
    minWidth: 130,
    render: scope => {
      return transformDate(scope.row.createTime, "local");
    }
  },
  {
    prop: "bannedEndTime",
    label: "封禁结束时间",
    minWidth: 130,
    render: scope => {
      return transformDate(scope.row.bannedEndTime, "local");
    }
  }
]);
</script>
